<template>
  <el-scrollbar>
    <div id="majorLibraryDetMidd">
      <div class="main" style="display: flex">
        <div class="left-tree">
          <el-tabs
            type="border-card"
            :stretch="true"
            v-model="treeActiveName"
            @tab-click="handleTreeClick"
          >
            <el-tab-pane label="本科" name="benke">
              <el-tree
                v-loading="treeLoading"
                :data="allMajor.majorsBK2"
                empty-text="暂无数据"
                :highlight-current="true"
                node-key="code"
                :props="defaultProps"
                :default-expanded-keys="expandedKeys"
                @node-click="handleNodeClick"
              >
                <template #default="{ node, data }">
                  <span
                    class="custom-tree-node"
                    :class="{
                      treeActive: node.data.code == code.substring(0, 4),
                    }"
                  >
                    <el-popover
                      :hide-after="0"
                      :teleported="teleported"
                      :offset="offset"
                      :width="400"
                      placement="right"
                      :ref="'elpopoverRef' + node.id"
                    >
                      <template #reference>
                        <div
                          class="df"
                          style="justify-content: space-between; width: 100%"
                          @mouseenter="treeMouseenter(node, data)"
                          @mouseleave="treeMouseleave"
                        >
                          <div @click="handleTreeLabel(node, data)">
                            {{ node.label }}
                          </div>
                          <div style="margin-right: 10px">
                            {{ node.data.childCount }}
                          </div>
                        </div>
                      </template>
                      <template #default>
                        <div
                          style="margin: 10px 0; font-weight: bold"
                          class="f16"
                        >
                          {{ popMajorData.name }}
                        </div>
                        <div class="df" style="flex-wrap: wrap">
                          <div
                            @click="handleItemOtherWeb(item)"
                            class="curr major-item"
                            v-for="item in popMajorData.majors"
                            :key="item.id"
                            style="margin: 10px 20px 0 0"
                          >
                            {{ item.name }}
                          </div>
                        </div>
                      </template>
                    </el-popover>
                  </span>
                </template></el-tree
              >
            </el-tab-pane>
            <el-tab-pane label="专科" name="zhuanke">
              <el-tree
                v-loading="treeLoading"
                :data="allMajor.majorsZK2"
                empty-text="暂无数据"
                node-key="code"
                :props="defaultProps"
                :default-expanded-keys="zhuankeExpandedKeys"
                @node-click="handleNodeClick"
              >
                <template #default="{ node, data }">
                  <span
                    class="custom-tree-node"
                    :class="{
                      treeActive: node.data.code == code.substring(0, 4),
                    }"
                  >
                    <el-popover
                      :hide-after="0"
                      :teleported="teleported"
                      :offset="offset"
                      :width="400"
                      placement="right"
                      :ref="'elpopoverZhuankeRef' + node.id"
                    >
                      <template #reference>
                        <div
                          class="df"
                          style="justify-content: space-between; width: 100%"
                          @mouseenter="treeMouseenter(node, data)"
                          @mouseleave="treeMouseleave"
                        >
                          <div @click="handleTreeLabel(node, data)">
                            {{ node.label }}
                          </div>
                          <div style="margin-right: 10px">
                            {{ node.data.childCount }}
                          </div>
                        </div>
                      </template>
                      <template #default>
                        <div
                          style="margin: 10px 0; font-weight: bold"
                          class="f16"
                        >
                          {{ zhuankePopMajorData.name }}
                        </div>
                        <div class="df" style="flex-wrap: wrap">
                          <div
                            @click="handleItemOtherWeb(item)"
                            class="curr major-item"
                            v-for="item in zhuankePopMajorData.majors"
                            :key="item.id"
                            style="margin: 10px 20px 0 0"
                          >
                            {{ item.name }}
                          </div>
                        </div>
                      </template>
                    </el-popover>
                  </span>
                </template>
              </el-tree>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="right-contaier">
          <div class="like-box df">
            <div class="left">
              <h1>{{ route.query.name || '-' }}</h1>
              <div class="mt15 f14" style="color: #999">
                国标代码{{ code || '-' }}(不可用于填报)
              </div>
            </div>
            <div class="right">
              <div
                class="df my-btn curr"
                style="justify-content: center"
                @click="handlComparison"
              >
                <div
                  :class="{ isActive: isSelected }"
                  style="width: 100%; text-align: center"
                >
                  <i
                    class="iconfont"
                    :class="
                      isSelected
                        ? 'icon-guanzhuxiangmu-yiguanzhu'
                        : 'icon-31guanzhu1'
                    "
                    :style="isSelected ? 'color:var( --background-color)' : ''"
                  ></i>
                  {{ isSelected ? '已关注' : '关注' }}
                </div>
              </div>
            </div>
          </div>
          <div class="tabs-box mt20">
            <el-tabs
              v-model="activeName"
              class="demo-tabs"
              @tab-click="handleClick"
            >
              <el-tab-pane label="专业概述" name="majorsummarize">
                <!-- 专业介绍 -->
                <div class="item-box">
                  <div class="df">
                    <mytitlebar title="包含专业" />
                    <div class="f14" style="color: #999; margin-left: 5px">
                      ({{ majorDataLength }})
                    </div>
                  </div>

                  <div>
                    <div
                      class="major-item"
                      v-for="item in searchMajorData.majors"
                      :key="item.code"
                    >
                      <div class="fcolor333 f16 mb10 curr">
                        <span @click="handleChangeDet(item)">{{
                          item.name
                        }}</span>
                      </div>
                      <div class="fcolor999 f14">
                        <span class="mr20">国标代码: {{ item.code }}</span>
                        <span class="mr20">学制 {{ item.learnYear }}年</span>
                        <span class="mr20">
                          男女比例 {{ item.maleRatio }}:{{ item.femaleRatio }}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="职业方向" name="second">
                <div class="df">
                  <mytitlebar title="相关专业" />
                  <div class="f14" style="color: #999; margin-left: 5px">
                    ({{ majordetailData.length }})
                  </div>
                </div>
                <div>
                  <div
                    class="job-list-item"
                    v-for="item in majordetailData"
                    :key="item.jobCode"
                  >
                    <span
                      class="job-name f16 curr"
                      @click="handleJorChange(item)"
                      >{{ item.jobName }}</span
                    >
                    <div class="job-classify f14">{{ item.industryName }}</div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { getAllMajor } from '@/api/selectSubject/subject';
import {
  getSearchMajorSchool,
  getSearchMajorJob,
  getSearchMajor,
} from '@/api/majorDetails/majorDetails';
import { getLikeSave, getLikeList } from '@/api/searchColleges/searchCollege';
import mytitlebar from './components/MyTitleBar';

import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
const route = useRoute();
const treeLoading = ref(false);
const defaultProps = {
  children: 'majors',
  label: 'name',
};
const teleported = ref(true);
const offset = ref();
const expandedKeys = ref([]);
const zhuankeExpandedKeys = ref([]);
const treeActiveName = ref('benke');
const activeName = ref('majorsummarize');
const code = ref('');
code.value = route.query.code;
const isSelected = ref(false);
const allMajor = ref({});
const handleChangeDet = (item) => {
  let level = '';
  if (item.eduLevel == 'ben') {
    level = 'benke';
  } else {
    level = 'zhuanke';
  }
  localStorage.setItem('level', level);
  const url =
    '/majorLibrary/majorLibraryDet' +
    '?code=' +
    item.code +
    '&name=' +
    item.name +
    '&level=' +
    level;
  window.open(url, '_blank');
};
const handleJorChange = (item) => {
  let url =
    '/jorLibrary/jorLibraryDet' +
    '?code=' +
    item.jobCode +
    '&name=' +
    item.jobName;
  window.open(url, '_blank');
};
const handleExpandedKey = () => {
  if (route.query.level == 'benke') {
    if (code.value) {
      expandedKeys.value.push(code.value.substring(0, 4));
    } else {
      expandedKeys.value = [];
    }
  } else if (route.query.level == 'zhuanke') {
    if (code.value) {
      zhuankeExpandedKeys.value.push(code.value.substring(0, 4));
    } else {
      zhuankeExpandedKeys.value = [];
    }
  }
};
handleExpandedKey();
const handleTreeLabel = (node, data) => {
  if (node.level != 2) {
    return;
  } else {
    let level = localStorage.getItem('level');
    const url =
      '/majorLibrary/majorLibraryDetMidd' +
      '?code=' +
      data.code +
      '&name=' +
      data.name +
      '&level=' +
      level;
    window.open(url, '_blank');
  }
};

const handleItemOtherWeb = (item) => {
  let level = localStorage.getItem('level');
  const url =
    '/majorLibrary/majorLibraryDet' +
    '?code=' +
    item.code +
    '&name=' +
    item.name +
    '&level=' +
    level;
  window.open(url, '_blank');
};
const popMajorData = ref([]);
// 专科的
const zhuankePopMajorData = ref([]);
const treeMouseenter = (node) => {
  if (treeActiveName.value == 'benke') {
    popMajorData.value = handleChangeMouse(node, allMajor.value.majorsBK);
  } else {
    zhuankePopMajorData.value = handleChangeMouse(
      node,
      allMajor.value.majorsZK,
    );
  }
};
const handleChangeMouse = (node, levelArr) => {
  if (node.level == 1) {
    teleported.value = false;
    offset.value = 30;

    return [];
  } else {
    let resArr = [];
    levelArr.forEach((v) => {
      resArr = resArr.concat(
        v.majors.filter((item) => item.code === node.data.code),
      );
    });
    offset.value = 0;
    teleported.value = true;
    return resArr[0];
  }
};
const handleChangeTreeActive = () => {
  treeActiveName.value = localStorage.getItem('level');
};
handleChangeTreeActive();
const treeMouseleave = () => {};

const handleClick = (tab) => {
  activeName.value = tab.paneName;
};
const handleNodeClick = () => {};
const majordetailData = ref({});
const searchMajorData = ref([]);
const majorDataLength = ref(0);
const fetchSearchMajorJob = () => {
  getSearchMajorJob({ code: code.value }).then((res) => {
    if (res.data.code == 20000) {
      majordetailData.value = res.data.data;
    }
  });
};
const fetchSearchMajor = () => {
  getSearchMajor({ code: code.value }).then((res) => {
    searchMajorData.value = res.data.data[0];
    majorDataLength.value = searchMajorData.value.majors.length;
  });
};
fetchSearchMajor();
fetchSearchMajorJob();
const handleTreeClick = (tab) => {
  treeActiveName.value = tab.paneName;
  localStorage.setItem('level', tab.paneName);
};
const fetcjLikeList = () => {
  let reqData = {
    // detail: "1",
    type: 'major',
  };
  getLikeList(reqData).then((res) => {
    let likeSchoolArr = res.data.data.major.split(',');
    let index = likeSchoolArr.indexOf(code.value);
    index == -1 ? (isSelected.value = false) : (isSelected.value = true);
  });
};
fetcjLikeList();
const handlComparison = () => {
  isSelected.value = !isSelected.value;
  fetchLikeSave();
};
const reqMajorSchoolData = ref({
  page: 1,
  pageSize: 10,
});

const schoolTableData = ref([]);
const fetchSearchMajorSchool = () => {
  reqMajorSchoolData.value.code = code.value;
  getSearchMajorSchool(reqMajorSchoolData.value).then((res) => {
    if (res.data.code == 20000) {
      schoolTableData.value = [...schoolTableData.value, ...res.data.data];
    }
  });
};
fetchSearchMajorSchool();
const liskeSaveData = ref({
  type: 'major',
  targetid: '',
  operate: '',
});

const fetchLikeSave = () => {
  liskeSaveData.value.targetid = code.value;
  isSelected.value
    ? (liskeSaveData.value.operate = 'save')
    : (liskeSaveData.value.operate = 'del');
  getLikeSave(liskeSaveData.value).then((res) => {
    if (res.data.code == 20000) {
      ElMessage({
        message: res.data.msg,
        type: 'success',
      });
    } else {
      ElMessage({
        message: res.data.msg,
        type: 'success',
      });
    }
  });
};
const fetchAllMajor = () => {
  treeLoading.value = true;
  getAllMajor()
    .then((res) => {
      if (res.data.code == 20000) {
        allMajor.value = res.data.data;
        treeLoading.value = false;
      } else {
        treeLoading.value = false;
      }
    })
    .catch(() => {
      treeLoading.value = false;
    });
};
fetchAllMajor();
</script>

<style lang="scss" scoped>
.job-list-item {
  padding: 10px 0 14px 0;
  border-bottom: 1px solid #f2f2f2;
}
.job-name {
  display: block;
  color: #333;
  margin-bottom: 13px;
  &:hover {
    color: var(--color-text);
  }
}
.job-classify {
  color: #666;
}
.major-item {
  padding: 15px 0 10px;
  border-bottom: 1px solid #f2f2f2;
}
.major-item span:not(:first-child):before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: #ccc;
  vertical-align: text-top;
  margin-right: 30px;
  margin-top: 4px;
}
#majorLibraryDetMidd {
  .el-tabs {
    padding-bottom: 150px;
  }
  //   height: 100vh;
  //   margin-bottom: 1000px;
  .main {
    .left-tree {
      width: 260px;
      margin-right: 30px;
    }
    .right-contaier {
      background: #fff7f4;
      height: 120px;
      flex: 1;
      .like-box {
        padding: 15px;
        height: 100%;
        justify-content: space-between;
      }
    }
    .my-btn {
      width: 80px;
      border-radius: 4px;
      justify-content: center;
      color: var(--color-text);
      border: 1px solid var(--color-text);

      &:hover {
        background: var(--color-text);
        color: #fff;
      }
    }
    .item-box {
      margin: 40px 0;
    }
  }
  .tabs-box {
    :deep(.el-tabs__active-bar) {
      height: 0px !important;
    }
    :deep(.el-tabs__nav-wrap::after) {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: var(--color-text);
      z-index: var(--el-index-normal);
    }
    :deep(.is-active) {
      background: var(--background-color);
      color: #fff;
      border-radius: 4px;
    }
    :deep(.el-tabs__item) {
      padding: 0 30px;
    }
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.treeActive {
  color: var(--color-text);
}
.major-item:hover {
  color: var(--color-text);
}
</style>
